<script lang="tsx" setup>
/**
 * 设备列表
 */

import {ref, watch} from "vue"
import {DeviceStateEnum} from "@/pages/data-cockpit/components/device-state/index.ts"
import {toSystemFixed} from "@/frame/utils/data-helper/fixed.ts"

/**
 * 定义props
 */
const props = defineProps<{
  deviceStateData: any
}>()

/**
 * 设备列表
 */
const list: any = ref([])

/**
 * 监视
 */
watch(() => props.deviceStateData, (newValue) => {
  if (newValue) {
    list.value = newValue
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="device-state">
    <div class="list">
      <div v-for="(item,index) in list" :key="index"
           :class="{'item-idle':item.status === DeviceStateEnum.闲置,'item-run':item.status === DeviceStateEnum.运行,'item-correct':item.status === DeviceStateEnum.校正,'item-close':item.status === DeviceStateEnum.关机}"
           class="item">
        <div class="item-block">
          <div class="item-block-data">{{ toSystemFixed(item.rate, 1) }}%</div>
          <div :style="{'height':item.rate * 161 / 100 + 'rem'}" class="item-block-inner">
          </div>
        </div>
        <div class="item-code">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>